<#include "../../common/meta.ftl">
		<script type="text/javascript" src="${ctx.contextPath}/coms/m97Date/WdatePicker.js"></script>
		
		<style>
			#mainDiv{
				display: none;
				position: absolute;
				z-index: 9998;
				top: 0px;
				left: 5px;
				width: 99%;
				height: 100%;
				filter:alpha(opacity=80); /*IE滤镜，透明度80%*/
				-moz-opacity:0.8; /*Firefox私有，透明度80%*/
				opacity:0.8;/*其他，透明度80%*/
				background: -moz-linear-gradient(top, #fcfcff, #dcdcff); /* Firefox */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcff), color-stop(1, #dcdcff)); /* Saf4+, Chrome */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcff', endColorstr='#dcdcff', GradientType='0'); /* IE*/
			}
			
			#usersDiv{
				margin: 100px auto;
				width:50%;
				background: #fff;
				border-left: 1px solid #888;
				border-right: 1px solid #888;
			}
			
		</style>
		
		<script type="text/javascript">
			var form;
			var all = '0';
			
			$(document).ready(function(){
				form = document.getElementById("kaoQin");
				
				if($('#deptId')){
					$('#deptId').combotree({url:'${ctx.contextPath}/rest/dept/combotree/public',method:'get',panelHeight:300,onChange:function(){
							var deptId = $('#deptId').combotree('getValue');
							if(document.getElementById('all').checked){
								all = '1';
							}else{
								all = '0';
							}
							$('#userId').combotree({url:'${ctx.contextPath}/rest/user/combotree/public?deptId=' + deptId + '&all=' + all,method:'get'});
						}
						});
					
					$('#deptId').combotree('setValue',$('#deptVal').val());
				}
				
				if($('#userId')){
					var deptId = getValue('deptId');
					if(document.getElementById('all').checked){
						all = '1';
					}else{
						all = '0';
					}
					$('#userId').combotree({url:'${ctx.contextPath}/rest/user/combotree/public?deptId=' + deptId + '&all=' + all,method:'get'});
					$('#userId').combotree('setValue',$('#userVal').val());
				}
			});
			
			function getUser(key){
				var deptId = getValue('deptId');
				if(key){
					all = '1';
				}else{
					all = '0';
				}
				$('#userId').combotree({url:'${ctx.contextPath}/rest/user/combotree/public?deptId=' + deptId + '&all=' + all,method:'get'});
			}
			
			function doSearch(){
				if(getValue('userId') == ''){
					alert("您还没有选择要统计的用户！");
					return;
				}
				if(!$('#month').val()){
					alert("您还没有选择要统计的月份！");
					return;
				}
				form.submit();
			}
			
			function getValue(inpName){
				var name = ''
				var input = document.getElementsByTagName('input');
				for (var i = 0; i < input.length; i++) {
					if(input[i].name==inpName && input[i].value != ''){
						name = input[i].value;
						break;
					}
				}
				return name;
			}
			
			function getDetail(obj, userId, date){
				removeDetail();
				$.getJSON('${ctx.contextPath}/rest/locate/getDetail?userId=' + userId + '&date=' + date,'',function(resData){
					if(resData.status != "success"){
						if(resData.length > 0){
							checkWorks = resData.split(';');
							var data = "<tr id=detail><td></td><td colspan=6 align=left style='padding:0px;'>"
								+"<table cellpadding=0 cellspacing=0><tr><td colspan=3>详细记录</td></tr>";
							
							for(var i = 0; i < checkWorks.length; i++){
								data += "<tr><td>" + checkWorks[i].split(',')[0].substr(11) + "</td><td>" 
									+ checkWorks[i].split(',')[1] + "</td><td>" 
									+ (checkWorks[i].split(',')[2]=='1'?'签到':'签退') + "</td></tr>";
							}
							data += "</table></td></tr>";
							$(data).insertAfter(obj);
						}
					}
				});
			}
			
			function removeDetail(){
				if(document.getElementById('detail')){
					var old = document.getElementById('detail');
					old.parentElement.deleteRow(old.rowIndex);
				}
			}
			
			//显示人员的地址图片
			function showQdAddress(obj,longitude,latitude){
			    //alert(longitude+","+latitude);
			     var locateName = obj.innerHTML.trim();
			    if(locateName==$('#locateName').val()){
			        longitude = $('#longitude').val();
			        latitude = $('#latitude').val();
			    }
			    document.getElementById('mainDiv').style.display='block';
			    var pic = document.getElementById('pic');
	            pic.innerHTML = "<img src='http://api.map.baidu.com/staticimage?center="+longitude+","+latitude+
	                             "&zoom=17&markers="+longitude+","+latitude+"&markerStyles=l,A' style='width:100%;'/>";
			}
			
			function closeMapDiv(){
	            document.getElementById('mainDiv').style.display='none';
	        }
		</script>
	</head>
	<body>
		<div class="head">
			<div class="path">考勤定位 &gt; 考勤统计（按人员）</div>
		</div>
		<div class="contents">
			<form id="kaoQin" action="${ctx.contextPath}/rest/locate/checkWorkByPerson" method="GET">
			    <input type="hidden" id="locateName" value="${(locateName)!''}"/>
			    <input type="hidden" id="longitude" value="${(longitude)!''}"/>
			    <input type="hidden" id="latitude" value="${(latitude)!''}"/>
			<!-- 查询 -->
				<table class="tb_1">
					<tr>
					    <th>部门：</th>
						<td>
							<select id="deptId" name="deptId" style="width:160px; height: 20px;"/></select>
							<input type="hidden" id="deptVal" value="${deptId!''}"/>
						</td>
						<th>
							<input type="checkBox" id="all" name="all" value="1"
								onClick="getUser(this.checked)" <#if all=='1'>checked</#if>/>
						</th>
						<td>包含下级</td>
						<th>姓名：</th>
						<td>
							<select id="userId" name="userId" style="width:100px; height: 21px;"></select>
							<input type="hidden" id="userVal" value="${userId!''}"/>
						</td>
						<th>考勤月份：</th>
			            <td>
							<input id="month" name="month" value="${(month)!''}" class="Wdate"
								style="width:80px; border:#AAC6D5 1px solid;" readonly="readonly" 
								onfocus="WdatePicker({el:$dp.$('registerDate'),dateFmt:'yyyy-MM'})" />
						</td>
						<td>
							<a href="#" class="btn_1" onClick="doSearch()"></a>
						</td>
					</tr>
				</table>
			</form>
			<!-- 列表 -->
			<dl class="box_1">
				<dt>
					<div>列表详情</div>
				</dt>
				<dd>
					<table class="tb_2" style="text-align: center;">
						<tr>
							<th>日　期</th>
							<th>星　期</th>
							<th>上午签到时间</th>
							<th>上午签到地点</th>
							<th>上午签退时间</th>
							<th>上午签退地点</th>
							<th>下午签到时间</th>
							<th>下午签到地点</th>
							<th>下午签退时间</th>
							<th>下午签退地点</th>
						</tr>
						<#list dataList as data>
							<tr <#if ((data_index+1)%2==0)> bgcolor="#FAFAFA" </#if>
								ondblclick="getDetail(this,'${(data.userId)!''}','${((data.date)?string('yyyy-MM-dd'))!''}')"
								onclick="removeDetail()"
								onMouseover="this.style.background='#F5E9A8'"
								onMouseout="this.style.background=<#if ((data_index+1)%2==0)>'#FAFAFA'<#else>'#FFF'</#if>"
								<#if (data.weekDay == '六' || data.weekDay == '日') >style="color:#e88;"</#if>>
								<td>
									${((data.date)?string('yyyy-MM-dd'))!''}
								</td>
								<td>
									${(data.weekDay)!''}
								</td>
								<!--<td>
									${(data.qdTime)!''}
								</td>-->
								<td>
									${((data.mornOnTime)?string('HH:mm:ss'))!''}
								</td>
								<td>
								 <a href="#" onclick="showQdAddress(this, '${data.mornOnLongitude}','${data.mornOnLatitude}')">
										<#if (data.mornOnLongitude?length>3)>
											<#if (data.mornOnAddress?length>9)>
											   ${(data.mornOnAddress?substring(3))!'查看位置'}
											<#elseif (data.mornOnAddress?length>0)&&(data.mornOnAddress?length<10)>
											   ${(data.mornOnAddress)!'查看位置'}
											<#else>
												查看位置
											</#if>
										</#if>
									</a>
								<!--<#if data.qdAddress??>
									<#assign dList =data.qdAddress?split(',')/>
									<a href="#" onclick="showQdAddress('${dList[1]}','${dList[2]}')">
									${(dList[0])!''}
									</a>
								</#if> -->
								</td>
								<td>
									${((data.mornOffTime)?string('HH:mm:ss'))!''}
								</td>
								<td>
								 <a href="#" onclick="showQdAddress(this, '${data.mornOffLongitude}','${data.mornOffLatitude}')">
										<#if (data.mornOffLongitude>3)>
											<#if (data.mornOffAddress?length>9)>
											   ${(data.mornOffAddress?substring(3))!'查看位置'}
											<#elseif (data.mornOffAddress?length>0)&&(data.mornOffAddress?length<10)>
											   ${(data.mornOffAddress)!'查看位置'}
											<#else>
												查看位置
											</#if>
										</#if>
									</a>
								</td>
								
								<td>
									${((data.afterOnTime)?string('HH:mm:ss'))!''}
								</td>
								<td>
								 <a href="#" onclick="showQdAddress(this, '${data.afterOnLongitude}','${data.afterOnLatitude}')">
										<#if (data.afterOnLongitude>3)>
											<#if (data.afterOnAddress?length>9)>
											   ${(data.afterOnAddress?substring(3))!'查看位置'}
											<#elseif (data.afterOnAddress?length>0)&&(data.afterOnAddress?length<10)>
											   ${(data.afterOnAddress)!'查看位置'}
											<#else>
												 查看位置
											</#if>
										</#if>			
									</a>
								<!--<#if data.qdAddress??>
									<#assign dList =data.qdAddress?split(',')/>
									<a href="#" onclick="showQdAddress('${dList[1]}','${dList[2]}')">
									${(dList[0])!''}
									</a>
								</#if> -->
								</td>
								<td>
									${((data.afterOffTime)?string('HH:mm:ss'))!''}
								</td>
								<td>
								 <a href="#" onclick="showQdAddress(this, '${data.afterOffLongitude}','${data.afterOffLatitude}')">
										<#if (data.afterOffLongitude>3)>
											<#if (data.afterOffAddress?length >9)>
											   ${(data.afterOffAddress?substring(3))!'查看位置'}
											<#elseif (data.afterOffAddress?length>0)&&(data.afterOffAddress?length<10)>
											   ${(data.afterOffAddress)!'查看位置'}
											<#else>
												 查看位置
											</#if>
										</#if>
									</a>
								</td>
							</tr>
						</#list>
					</table>
				</dd>
			</dl>
			<div id="mainDiv">
				<div id="usersDiv" style="border-top: 1px solid #888;">
					<div id="pic"></div>
					<div id="closeButton" style="width:100%; height:27px; border-bottom: 1px solid #888; background: #ccf; text-align: center;">
						<input type="button" style="width:77px; height: 25px; margin-top:1px; cursor:pointer;
							border: #999 1px solid; color:#339; font-size: 14px; font-family: 黑体;
							background: url(${ctx.contextPath}/images/back_ok.png) 0px 23px;" 
							onclick="closeMapDiv()" value="关闭"
							onMouseOver="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 0px'"
							onMouseOut="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 23px'" />
				   </div>
				</div>
			</div>	
		</div>
	</body>
</html>
